<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兰蔻官网</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font_2298017_5jtgir1flf4/iconfont.css">
</head>

<body>
    <!-- 顶部导航部分 -->
    <div class="header">
        <!-- 上面 -->
        <div class="header-up">
            <h1>
                <img src="img/logo@2x.png" alt="" class="logo1">
            </h1>
        </div>
        <!-- 下面 -->
        <div class="header-down">
            <div class="header-down-hezi">
                <ul id="ul">
                    <img src="img/logo@2x.png" alt="" id="logo">
                    <li><a href="">首页</a></li>
                    <li class="eryi"><a href="" class="Submenu-hezi">护肤
                        <!-- 二级菜单 -->
                        <div class="Submenu">
                            <div class="Submenu-dad">
                                <div class="Submenu-left">
                                  <ul>
                                      <li>
                                          <h3>产品类型</h3>
                                          <a href="">卸妆&洁面</a>
                        <a href="">美容液&爽肤水</a>
                        <a href="">精华</a>
                        <a href="">眼部护理</a>
                        <a href="">乳液</a>
                        <a href="">面霜</a>
                        <a href="">面膜</a>
                        <a href="">防嗮隔离</a>
                    </li>
                    <li>
                        <h3>产品类型</h3>
                        <a href="" class="yi">卸妆&洁面</a>
                        <a href="">美容液&爽肤水</a>
                        <a href="">精华</a>
                        <a href="">眼部护理</a>
                        <a href="">乳液</a>
                        <a href="">面霜</a>
                        <a href="">面膜</a>
                        <a href="">防嗮隔离</a>
                    </li>
                    <li>
                        <h3>产品类型</h3>
                        <a href="" class="yi">卸妆&洁面</a>
                        <a href="">美容液&爽肤水</a>
                        <a href="">精华</a>
                        <a href="">眼部护理</a>
                        <a href="">乳液</a>
                        <a href="">面霜</a>
                        <a href="">面膜</a>
                        <a href="">防嗮隔离</a>
                    </li>


                </ul>
            </div>
            <div class="Submenu-center">
                <div class="Submenu-center-shu">

                </div>
            </div>
            <div class="Submenu-right">
                <div class="LightLoupe">
                    <div class="LightLoupe-img">
                        <a href=""><img src="img/Submenu1.jpg" alt=""></a>

                    </div>
                    <div class="LightLoupe-font">
                        <b><a href="">第二代【小黑瓶】</a> </b>
                        <a href="">
                            <p>强维稳·快修复></p>
                        </a>


                    </div>
                </div>
            </div>

        </div>
    </div>
    </a>
    </li>
    <li class="erer"><a href="">彩妆
        <!-- 二级菜单 -->
        <div class="Submenu2">
            <div class="Submenu2-dad">
                <div class="Submenu2-left">
                  <ul>
                      <li>
                          <h3>底妆</h3>
                          <a href="">妆前乳</a>
        <a href="">气垫霜</a>
        <a href="">粉底</a>
        <a href="">蜜粉&散粉</a>
        <a href="">乳液</a>
        <a href="">修容遮瑕</a>
        <a href="">腮红</a>

    </li>
    <li>
        <h3>唇妆</h3>
        <a href="" class="yi">唇膏</a>
        <a href="">唇釉</a>

    </li>
    <li>
        <h3>眼妆</h3>
        <a href="">睫毛育</a>
        <a href="">眼线笔</a>
        <a href="">眉部</a>

    </li>


    </ul>
    </div>
    <div class="Submenu-center">
        <div class="Submenu-center-shu">

        </div>
    </div>
    <div class="Submenu-right">
        <div class="LightLoupe">
            <div class="LightLoupe-img">
                <a href=""><img src="img/Submenu2.jpg" alt=""></a>

            </div>
            <div class="LightLoupe-font">
                <b><a href="">持妆粉底液</a> </b>
                <a href="">
                    <p>持妆不假面></p>
                </a>


            </div>
        </div>
    </div>

    </div>
    </div>
    </a>
    </li>
    <li class="ersan"><a href="">香水
          <!-- 二级菜单 -->
          <div class="Submenu3">
            <div class="Submenu3-dad">
                <div class="Submenu3-left">
                  <ul>
                      <li>
                          <h3>女士香水</h3>
                          <a href="">美丽人生系列</a>
        <a href="">奇迹系列</a>
        <a href="">珍爱系列</a>
        <a href="">殿堂系列</a>
    </li>
    </ul>
    </div>
    <div class="Submenu-center">
        <div class="Submenu-center-shu">

        </div>
    </div>
    <div class="Submenu-right">
        <div class="LightLoupe">
            <div class="LightLoupe-img">
                <a href=""><img src="img/Submenu3.jpg" alt=""></a>

            </div>
            <div class="LightLoupe-font">
                <b><a href="">美丽人生香水</a> </b>
                <a href="">
                    <p>快乐因你而生></p>
                </a>


            </div>
        </div>
    </div>

    </div>
    </div>
    </a>
    </li>
    <li><a href="">秋冬必囤</a></li>
    <li>
        <a href="">菁纯奢宠</a>
    </li>
    <li>
        <a href="">试用中心</a>
    </li>
    <li>
        <a href="">会员中心</a>
    </li>
    </ul>
    <div class="header-down-right">
        <div class="header-down-rightq">
            <a href=""><span class="zhucebian"></a>
            <!-- 二级菜单 -->
            <div class="erji-sousuo">
                <!-- 上面 -->
                <div class="sousuo-top">
                    <div class="sousuo-top-hezi">
                        <input type="text" placeholder="新年礼遇">
                        <img src="img/fadajing.png" alt="" class="fangdajing">
                    </div>

                </div>
                <!-- 中间 -->
                <div class="sousuo-center">
                    <!-- 顶部文字 -->
                    <div class="sousuo-center_font"> <span class="lishi">历史游览</span>
                    </div>
                    <!-- 中间 -->
                    <div class="sousuo-center_center">
                        <ul>
                            <li>
                                <a href=""><img src="img/sousuo1.jpg" alt=""></a>
                                <p>【小黑瓶】</p>
                                <span>￥1080</span>
                            </li>
                            <li>
                                <a href=""><img src="img/sousuo2.jpg" alt=""></a>
                                <p>净澈焕肤</p>
                                <span>￥740</span>
                            </li>
                            <li>
                                <a href=""><img src="img/sousuo3.jpg" alt=""></a>
                                <p>菁纯眼霜</p>
                                <span>￥1080</span>
                            </li>
                        </ul>
                    </div>

                </div>
                <!-- 下面 -->
                <!-- 底部文字 -->
                <div class="sousuo-footer">
                    <div class="douzaisou">
                        <span class="dajia">大家都在搜</span>
                    </div>
                    <div class="ziduan">
                        <div class="ull">
                            <div class="lil">
                                <a href="#" class="aya">新年礼遇</a>
                            </div>
                            <div class="lil">
                                <a href="#" class="aya">口碑粉水</a>
                            </div>
                            <div class="lil">
                                <a href="#" class="aya">菁纯家族</a>
                            </div>
                            <div class="lil">
                                <a href="#" class="aya">极光系列</a>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
            </span>
            </a>
        </div>
        <div class="header-down-rightw">
            <a href=""><span class="zhucebian1"></span></a>
        </div>
        <div class="header-down-righte">
            <span class="zhucebian2">
            <!-- 登录注册二级菜单 -->
            <div class="sub-denglu-zhuce">
                <!-- 顶部文字 -->
                <div class="denglu-zhuce-top">
                    <div class="zhuce-top-wenzi">
                        兰蔻会员欢迎您，注册享积分,登陆享礼遇!
                    </div>
                </div>
                <!-- 登录注册下面的框 -->
                <div class="denglu-kuang">
                    <!-- 登录框小盒子 -->
                    <div class="denglu-kuang_hezi">
                        <!-- 登录  注册 -->
                        <div class="denglu_zhuce">
                            <div class="denglu_zhuce-hezi">
                                <!-- 登录 -->
                                <div class="deng-lu">
                                    <span><a href=""
                                       >登录</a> </span>
        </div>
        <div class="shuxian">

        </div>
        <div class="zhuce">
            <span><a href=""
                                        >注册</a> </span>
        </div>
    </div>
    </div>
    <!-- 手机号 -->
    <div class="shoujihao-kuang">
        <input type="text" placeholder="手机号">
        <span>请输入有效的手机号</span>
    </div>
    <!-- 验证码 -->
    <div class="yanzhenma-kuang">
        <input type="text" placeholder="输入验证码"><span>7U8z</span><a href="">看不清换一张</a>
    </div>
    <!-- 短信验证码 -->
    <div class="duanxinyanzhenma-kuang">
        <input type="text" placeholder="短信验证码"><button>发送</button><span>请输入短信验证码</span>
    </div>
    <!-- 登录 -->
    <div class="dengluanniud">
        <button class="dengluanniu">登录</button>
    </div>
    <!-- 密码登录 -->
    <div class="mimadenglu">
        <a href="">密码登录</a>
    </div>
    <!-- 使用第三方账号登录 -->
    <div class="denglu_footer">
        <span class="shiyung">使用第三方账号登录</span>
        <a href=""><img src="img/qq.jpg" alt=""></a>
        <a href=""><img src="img/weixin.jpg" alt=""></a>
        <a href=""><img src="img/zhifubo.jpg" alt=""></a>
        <a href=""> <img src="img/weibo.jpg" alt=""></a>
    </div>
    </div>
    <!-- 注册框小盒子 -->
    <div class="denglu-kuang_hezi1">
        <!-- 登录  注册 -->
        <div class="denglu_zhuce">
            <div class="denglu_zhuce-hezi">
                <!-- 登录 -->
                <div class="deng-lu">
                    <span><a href="#" >登录</a> </span>
                </div>
                <div class="shuxian">

                </div>
                <div class="zhuce">
                    <span><a href="#" >注册</a> </span>
                </div>
            </div>
        </div>
        <!-- 手机号 -->
        <div class="shoujihao-kuang1">
            <input type="text" placeholder="手机号">
            <span>请输入有效的手机号</span>
        </div>
        <!-- 密码 -->
        <div class="shoujihao-kuang2">
            <input type="text" placeholder="密码">
            <span>请输入您的密码</span>
        </div>
        <!-- 请再次输入密码 -->
        <div class="shoujihao-kuang2">
            <input type="text" placeholder="请再次输入密码">
            <span>请输入确认密码</span>
        </div>
        <!-- 验证码 -->
        <div class="yanzhenma-kuang1">
            <input type="text" placeholder="输入验证码"><span>7U8z</span><a href="">看不清换一张</a>
        </div>
        <!-- 短信验证码 -->
        <div class="duanxinyanzhenma-kuang1">
            <input type="text" placeholder="短信验证码"><button>发送</button><span>请输入短信验证码</span>
        </div>
        <!-- 注册条款 -->
        <div class="zhucetiaokuang">
            <input type="radio"><span>我同意依照本使用条款和隐私政策对我的个人信息进行收集和使用;我已阅读并确认被给予充分机会理解该使用条款和隐私政策的内容。</span>
        </div>
        <!-- 立即注册 -->
        <div class="dengluanniud1">
            <button class="dengluanniu1">立即注册</button>
        </div>
        <!-- 邮箱注册 -->
        <div class="mimadenglu1">
            <a href="">邮箱注册</a>
        </div>
    </div>
    </div>
    </div>
    </span>
    </div>

    </div>
    </div>

    </div>
    </div>
    <!-- 轮播图 -->
    <div id="oImg">
        <!-- 箭头 -->
        <div id="jiantou"><img src="img/jiantou.png" alt=""></div>
        <div id="jiantou1"><img src="img/jiantou2.png" alt=""></div>
        <ul>
            <li class="lis"><span></span></li>
            <li class="lis"></li>
            <li class="lis"></li>
            <li class="lis"></li>
            <li class="lis"></li>
            <li class="lis"></li>
        </ul>
    </div>
    <!-- 官网特别推荐 -->
    <div class="recommend">
        <div class="recommend-officials">
            <div class="recommend-official">
                <h3>官网特别推荐</h3>
            </div>

        </div>
        <div class="recommend-list">
            <ul>
                <li>秋冬必囤</li>
                <li>菁纯家族</li>
                <li>人气彩妆</li>
            </ul>
        </div>
    </div>
    <!-- 图加轮播图 -->
    <div class="tu_lunbao">
        <!-- 盒子 -->
        <div class="tu_lunbao-hezi">
            <!-- 左边图片 -->
            <div class="tu_lunbao-left">
                <a href="">
                    <img src="img/qiang.jpg" alt="">
                </a>
            </div>
            <!-- 右边轮播图 -->
            <div class="tu_lunbao-right">
                <div class="lunbao-righthezi">
                    <div class="lunbao-right1">
                        <a href="">
                            <img src="img/imga/5.jpg" alt="">
                        </a>
                    </div>
                    <div class="lunbao-right2">
                        <a href="">
                            <img src="img/imga/0.jpg" alt="">
                        </a>
                    </div>
                    <div class="lunbao-right3">
                        <a href="">
                            <img src="img/imga/6.jpg" alt="">
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- 官网甄选  -->
    <div class="recommend">
        <div class="recommend-officials">
            <div class="recommend-official">
                <h3>官网甄选 明星系列</h3>
            </div>

        </div>
        <div class="recommend-list">
            <hr>
            <ul>
                <li>小黑瓶系列</li>
                <li>秋冬必囤</li>
                <li>菁纯家族</li>
                <li>人气彩妆</li>
            </ul>
            <hr>
        </div>
    </div>
    <!-- 系列图 -->
    <div class="overview-printout">
        <img src="img/xilie1.jpg" alt="">
    </div>
    <!-- 官网特别服务 -->
    <div class="recommend">
        <div class="recommend-officials">
            <div class="recommend-official">
                <h3>官网特别服务</h3>
            </div>
        </div>
    </div>
    <!-- 三个轮播图
     -->

    <!-- 没加图片 -->
    <div class="three-banner">
        <div class="three-banners">
            <div class="three-banner_center">
                <div class="banner_center-hezi">
                    <div class="banner_center-yi">
                        <a href="">
                            <img src="img/santu2.jpg" alt="">
                        </a>
                    </div>
                    <div class="banner_center-er">
                        <a href="">
                            <img src="img/santu1.jpg" alt="">
                        </a>
                    </div>
                    <div class="banner_center-san">
                        <a href="">
                            <img src="img/santu3.jpg" alt="">
                        </a>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <!-- 独家礼遇 -->
    <div class="recommend">
        <div class="recommend-officials">
            <div class="recommend-official">
                <h3>暖心甄选 独家礼遇</h3>
            </div>
        </div>
    </div>

    <!-- 礼包图 -->
    <!-- 没加图片 -->

    <div class="Bonus">
        <div class="Bonus-center">
            <a href="">
                <img src="img/libao.jpg" alt="">
            </a>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="footers">
            <ul>
                <li>
                    <h5>关于我们</h5>
                    <p><a href="">加入兰蔻</a></p>
                    <span><a href="">会员中心</a></span>
                </li>
                <li>
                    <h5>联系我们</h5>
                    <p><a href="">线上美容顾问</a></p>
                    <span><a href="">客服热线:400-820-8016</a></span>
                </li>
                <li>
                    <h5>配送及退货</h5>

                </li>
                <li>
                    <h5>专柜查询</h5>

                </li>
                <li>
                    <h5>关注我们</h5>
                    <p><a href="">官方微信</a></p>
                    <span><a href="">官方微博</a></span>
                </li>

            </ul>
        </div>
        <!-- 电子邮箱 -->
        <div class="mailboxa">
            <div class="mailbox">
                <h6>电子邮箱</h6>
                <div class="mailbox-hezi">
                    <input type="text" placeholder="*输入您的邮箱"><button>确定</button>
                </div>

            </div>
        </div>

    </div>

    <!-- 底部文字 -->
    <div class="explain">
        <div class="diyihang">
            国家药监局提示您：宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注“国妆特字”或者“国妆特进字”的标准文号。
        </div>
        <div class="dierhang">
            © L’Oreal China 欧莱雅（中国）有限公司版权所有
        </div>
        <div class="disanhang">
            使用条款丨Cookies政策丨隐私政策
        </div>
        <div class="disihang">
            浏览该网站表示您接受并同意我们使 用cookies为您提供个性化的浏览体验。点击Cookies政策了解详情
        </div>
    </div>

</body>

</html>
<script src="js/jQuery.js"></script>
<script src="js/viewpager.js"></script>